import React, {Component} from 'react';
import cssModule from './PostCardItem.module.less'
import testimg from "../../assets/img/001.jpg";

import PropTypes from 'prop-types'  // 组件传参用的参数校验
import {withRouter} from 'react-router-dom'  // 作用：非路由组件取path值

class PostCardItem extends Component {

    static propTypes = {
        options: PropTypes.object
    }
    onGoTo = (url) => this.props.history.push(url)

    render() {
        let {ToUrl} = this.props.options

        return (
            <div className='flex flex-col bg-White padd20' onClick={() => this.onGoTo(`${ToUrl}`)}>
                <section className='flex just-spa-bet ali-cen'>
                    <div className='flex ali-cen'>
                        <p className='font-wei600 fo-18 mr10'>WEB前端开发工程师</p>
                        <span className='small-tag-line-orange'>校招</span>
                    </div>
                    <div>
                        <p className='fo-green font-wei600'>6-10K·13薪</p>
                    </div>
                </section>
                <section className='flex ali-cen flex-wrap mt14'>
                    <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>HTML</span>
                    <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>CSS</span>
                    <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>JS</span>
                    <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>VUE</span>
                    <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>React</span>
                    <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>radius</span>
                    <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>golang</span>
                    <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>python</span>
                    <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>mysql</span>
                </section>
                <section className='flex ali-cen mt10'>
                    <p>九章算法</p>
                    <p>不需要融资</p>
                    <span className='fo-gray'>20-99人</span>
                </section>
                <section className='flex ali-cen just-spa-bet mt10'>
                    <div className='flex ali-cen '>
                        <img className='yicon-26 radius50p mr8' src={testimg}/>
                        <div className='fo-12'>陈女士 · 招聘者</div>
                    </div>
                    <div className='flex ali-cen'>
                        <span className='fo-gray fo-10'>西湖区 西安</span>
                    </div>
                </section>
            </div>
        );
    }
}

export default withRouter(PostCardItem)